<!--
 * @Author: zww 表格组件——该组件设计的思想模仿elemnet-ui
 * @Date: 2021-08-05 14:41:07
 * @LastEditTime: 2021-08-05 17:35:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuestudy\vue\15-组件\表格组件.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/common.css" />
    <title>Document</title>
</head>
<style>
    .table-con{
        text-align: center;
    }
    table {
        border-collapse: collapse;
        margin: auto;
    }

    th,
    td {
        border: 1px solid #ff0080;
        padding: 2px 20px;
        text-align: center;
    }

    th {
        background-color: #ff0080;
        color: #fff;
    }

    [v-cloak] {
        display: none;
    }
</style>

<body>
    <!-- 何时使用插槽：插入的内容包含图片标签等需要渲染的元素时 -->
    <div id="app" v-cloak>
        <b-table :col-list="colList" :data-list="dataList">
        </b-table>
    </div>

    <script>
        // 表格组件
        Vue.component("b-table", {
            props: {
                colList: {
                    type: Array,
                    required: true,
                },
                dataList: {
                    type: Array,
                    required: true,
                }
            },
            template: `
        <div class="table-con">
            <table>
                <tr>
                    <th v-for="item in colList">{{item.title}}</th>
                </tr>
                <tr v-for="(item) in dataList">
                    <td v-for="col in colList">{{item[col.key]}}</td>
                </tr>
            </table>
            // col in colList 获取的是对象是来确定有多少列显示
            <br>
            // item[col.key]显示的是在对应列表下的数据
        </div>
            `,
            data() {
                return {
                    peoplefiled: [],
                };
            },
            mounted() {
                console.log(this.peoplefiled);
            },
        });
        new Vue({
            el: "#app",
            data() {
                return {
                    colList: [{
                            title: '姓名',
                            key: 'name'
                        },
                        {
                            title: '年龄',
                            key: 'age'
                        },
                        {
                            title: '爱好',
                            key: 'hobby'
                        },
                    ],
                    dataList: [{
                            name: "小文",
                            age: 26,
                            hobby: "happy",
                        },
                        {
                            name: "陆婷",
                            age: 26,
                            hobby: "sing",
                        },
                        {
                            name: "陆迪",
                            age: 26,
                            hobby: "dance",
                        },
                    ],
                };
            },
        });
    </script>
</body>

</html>